<template>
  <div class="base-table">
    <div class="action">
      <slot name="action"></slot>
    </div>
    <el-table v-bind="$attrs">
      <template v-for="item in columns" :key="item.prop">
        <el-table-column
          v-if="item.type === 'selection'"
          width="55"
          v-bind="item"
        />
        <el-table-column v-else-if="!item.type" v-bind="item" />
        <el-table-column v-if="item.type === 'action'" v-bind="item">
          <template #default="scope">
            <template v-for="(btn, index) in item.list" :key="index">
              <el-button
                :type="btn.type || 'text'"
                @click="handleAction(index, scope.row)"
                >{{ btn.text }}</el-button
              >
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup>
defineProps(['columns'])

const handleAction = (index, row) => {
  console.log(index, row)
}
</script>

<style lang="scss" scoped></style>
